! function($) {
    let sid = location.search.substring(1).split('=')[1];
    console.log(sid);
    if (!sid) {
        sid = 1;
    }

    $.ajax({
        url: 'http://localhost/JS2112/xiaomi/php/detail.php',
        data: {
            sid
        },
        dataType: 'json'
    }).then(function(resDate) {
        // console.log(resDate);
        $('.img-box img').attr('src', resDate.goods_img);
        $('#bf #bpic').attr('src', resDate.goods_img);
        $('.product-con h2').html(resDate.goods_title);
        $('.product-con .price-info span').html(resDate.goods_price + ' 元');
        $('.product-con  .total-price span').html('总计：' + resDate.goods_price + ' 元');
        $('.product-con  .selected-list li').html(resDate.goods_title);
        $('.product-con  .selected-list span').html(resDate.goods_price + ' 元');

        console.log(resDate.goods_smallpic.split(','));
        let arrPic = resDate.goods_smallpic.split(',');
        console.log(123);
        console.log(resDate.goods_smallpic.split(',').length);
        let str = '';
        $.each(arrPic, function(index, value) {
            str += `
                <li>
                    <img src="${value}"/>
                </li>
            `;
        });
        $('#list ul').html(str);




        let str1 = '';
        for (let i = 0; i < resDate.goods_smallpic.split(',').length; i++) {
            str1 += `<span class="bullet"></span>`;
        }
        $('.img-left .pagination').html(str1);

        // let str2 = resDate.goods_smallpic.split(',').length;

        // let imgList = $('.img-left #list li').length;
        // imgList.each(function() {
        //     str1 += `<span class="bullet"></span>`;
        // });
        // $('.img-left .pagination').html(str1);

    });

    // 点击列表切换小图
    const imgBox = $('.page-info .img-left');
    const spic = $('#spic');
    const sf = $('#sf');
    const bpic = $('#bpic');
    const bf = $('#bf');
    const listUL = $('#list ul');


    //切换
    $('#list ul').on('click', 'li', function() {
        let url = $(this).find('img').attr('src');
        spic.find('img').attr('src', url);
        bpic.attr('src', url);
    });

    //图片列表的点击切换
    const leftList = $('#ulist #left');
    const rightList = $('#ulist #right');
    let num = 4;
    rightList.on('click', function() {
        let liwidth = $('#list ul li').eq(0).outerWidth(true);

        let listlen = $('#list ul li').length;

        if (num < listlen) {
            num++;
            if (num == listlen) {
                $(this).css('color', '#fff');
            }
            $('#left').css('color', '#333');
        }
        listUL.animate({
            left: -liwidth * (num - 4)
        });
    })

    leftList.on('click', function() {
        let liwidth = $('#list ul li').eq(0).outerWidth(true);

        if (num > 4) {
            num--;
            if (num == 4) {
                $(this).css('color', '#fff');
            }
            $('#right').css('color', '#333');
        }
        listUL.animate({
            left: -liwidth * (num - 4)
        });
    })



    // 图片的轮播

    const bullet = $('.img-left .pagination');
    // const bulletSpan = $('.img-left .pagination').children();
    // const bulletSpan = document.querySelector('.img-left .pagination span');
    const leftArrow = $('.img-left .left-box');
    const rightArrow = $('.img-left .right-box');
    let index = 0;
    console.log(123);
    // console.log(bulletSpan.index());

    // 通过图片列表与bullet对应的index，点击bullet切换图片
    bullet.on('click', 'span', function() {
        index = $(this).index();

        $(this).addClass('active').siblings('span').removeClass('active');
        let url = $('#list ul li').find('img').eq(index).attr('src');
        spic.find('img').attr('src', url);
        bpic.attr('src', url);
    });


    rightArrow.on('click', function() {
        index++;
        console.log(index);

        bullet.find('.bullet').eq(index).addClass('active').siblings('span').removeClass('active');
        if (index > bullet.find('.bullet').length - 1) {
            index = 0
            bullet.find('.bullet').eq(0).addClass('active');
        }
        let url = $('#list ul li').find('img').eq(index).attr('src');
        spic.find('img').attr('src', url);
        bpic.attr('src', url);

    });









}(jQuery);







! function($) {
    $('.wx').on('mouseover', function() {
        $('#J_followWxImg').attr({ 'style': 'display: block' });
    }).on('mouseout', function() {
        $('#J_followWxImg').attr({ 'style': 'display: none' });
    })

    // 底部定时器
    function imgActive() {
        let timer = null;
        timer = setInterval(() => {
            $('.img2').show();
        }, 3000);
        timer = setInterval(() => {
            $('.img2').hide();
        }, 6000);
    }
    imgActive();

    // 购物车下移内容
    $('.topbar-cart').hover(function() {
        console.log(1);
        $('.cart-content').delay(1000).addClass('active');
        $(this).find('.cart-menu').stop().animate({
            height: 100
        }, 60);
    }, function() {
        console.log(2);

        // 队列控制背景的延迟消失
        $('.cart-content').delay(60).queue(function() {
            $(this).clearQueue();
            $(this).removeClass('active');
            // $(this).dequeue();
        });

        $(this).find('.cart-menu').stop().animate({
            height: 0
        }, 60);
    })

    // 下载吧下移图片
    $('.download').hover(function() {
        console.log(1);

        $(this).find('.appCode').stop().animate({
            height: 148
        }, 60);

    }, function() {
        console.log(2);
        $(this).find('.appCode').stop().animate({
            height: 0
        }, 60);
    })
}(jQuery);

// 导航下移内容
! function($) {
    const menuLi = $('.heater_title .heater-nav .item');
    const children = $('.heater_title .item-children');
    const contentsUL = $('.heater_title .container .contentUL');
    let timer = null;

    // menuLi移入出现下移菜单移出消失,延迟执行，节流
    menuLi.hover(function() {

        clearTimeout(timer);
        timer = setTimeout(() => {
            children.stop().animate({
                height: 230
            });
            contentsUL.eq($(this).index() - 1).show().siblings('ul').hide();
        }, 200)
    }, function() {
        clearTimeout(timer);
        timer = setTimeout(() => {
            children.stop().animate({
                height: 0
            });
        }, 200)
    })

    //children移入继续显示，移出收缩,延迟执行，一起异步
    children.hover(function() {
        clearTimeout(timer);
        timer = setTimeout(() => {
            $(this).stop().animate({
                height: 230
            });
        }, 200)
    }, function() {
        clearTimeout(timer);
        timer = setTimeout(() => {
            children.stop().animate({
                height: 0
            });
        }, 200)
    })

    // 搜索栏placeholder定时改变
    function placeholderTimer() {
        const placeholder = $('.heater_title .heater-search .search-text')
        let timer = null;
        timer = setInterval(() => {
            placeholder.attr('placeholder', '手机')
        }, 3000);

        timer = setInterval(() => {
            placeholder.attr('placeholder', '电脑')
        }, 6000);

        timer = setInterval(() => {
            placeholder.attr('placeholder', '平板')
        }, 9000);

        timer = setInterval(() => {
            placeholder.attr('placeholder', '2022新flag 新智能生活')
        }, 12000);
    }
    placeholderTimer();
}(jQuery);